<!-- 横向滚动 -->
<template>
  <div class="XScroll">
    <div class="xscroll-content">
      <div class="item" v-for="(item, index) in arr" :key="index" :style="{background: item}">
        {{index}}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'XScroll',
  components: {  },
  data () {
    return {
      arr: ['#1DC046', '#4A74FF', '#C01D1D'],
    }
  },
  computed: {
  },
  mounted () {
    this.$el.addEventListener('wheel', this.handleWheel);
  },
  beforeDestroy () {
    this.$el.removeEventListener('wheel', this.handleWheel);
  },
  methods: {
    handleWheel(event) {
      // 阻止默认的滚轮滚动行为
      event.preventDefault();
      // 根据滚轮的滚动方向来改变容器的 scrollLeft 属性
      event.target.parentElement.scrollLeft -= event.wheelDeltaY;
      console.log(event.target.parentElement.scrollLeft, event.wheelDeltaY)
    },
  },
}
</script>

<style lang="less">
.XScroll {
  width: 900px;
  height: 600px;
  overflow: hidden;
  .xscroll-content {
    height: 100%;
    width: 100%;
    display: inline-flex;
    overflow: auto;
    .item {
      flex: 0 0 100%;
      height: 100%;
      margin-right: 10px;
    }
  }
}
</style>
